<template>
  <div class="tableBox">
    <Table2el
      style="width: 100%"
      :data="tableData"
      :height="tabelHeight"
      :header-cell-style="headerCellStyle"
      :header-row-style="headerRowStyle"
      :border="border"
      :cell-style="cellStyle"
    >
      <slot></slot>
    </Table2el>
    <Pagination2el
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
    />
  </div>
</template>


<script>
import Table2el from "@/components/table2el/table2el.vue";
import Pagination2el from "@/components/pagination2el/pagination2el.vue";

/**
 * @description: 分页列表组件
 * @param data {Array} 表格数据
 * @param height {String} 表格高度
 * @param headerCellStyle {Object} 表头单元格样式
 * @param headerRowStyle {Object} 表头行样式
 * @param border {Boolean} 是否显示边框
 * @param mainMaxHeight {String} 主表最大高度
 * @param cellStyle {Object} 单元格样式
 * @param pageOption {Object} 分页配置
 * @param pageOption.pageSize {Number} 每页显示条数
 * @param pageOption.pageSizes {Array} 每页显示条数选择器
 * @param pageOption.layout {String} 分页布局
 * @param pageOption.total {Number} 总条数
 * @param pageOption.currentPage {Number} 当前页
 * @function sizeChange(val) {Function} 每页显示条数变化时触发
 * @function currentChange(val) {Function} 当前页变化时触发
 * 参考链接：
 *      https://element.eleme.cn/#/zh-CN/component/table
 *      https://element.eleme.cn/#/zh-CN/component/pagination
 * 使用方法：
 * <TableBox
    :data="tableData"
    :pageOption.sync="pageOption"
    @sizeChange="sizeChange"
    @currentChange="currentChange"
  >
    <el-table-column prop="id" label="ID" align="center" />
    <el-table-column prop="name" label="昵称" align="center" />
  </TableBox>
 */


export default {
  name: "tableBox",
  components: {
    Table2el,
    Pagination2el
  },
  methods: {
    handleSizeChange () {
      this.$emit("sizeChange", ...arguments);
      this.$emit(
        "update:pageOption",
        Object.assign(this.pageOption, { pageSize: arguments[0] })
      );
    },
    handleCurrentChange () {
      this.$emit("currentChange", ...arguments);
      this.$emit(
        "update:pageOption",
        Object.assign(this.pageOption, { currentPage: arguments[0] })
      );
    },
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    pageOption: {
      type: Object,
      default: () => {
        return {
          pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
          layout: "total, sizes, prev, pager, next, jumper",
          currentPage: 1,
          pageSize: 1,
          total: 0,
        };
      },
    },
    height: {
      type: [String, Number],
      default: 'auto'
    },
    headerRowStyle: {
      type: Object,
      default: () => {
        return {
          height: '16px'
        }
      }
    },
    headerCellStyle: {
      type: Object,
      default: () => {
        return {
          height: '32px !important',
          background: '#E0EAF5',
        }
      }
    },
    border: {
      type: Boolean,
      default: true
    },
    cellStyle: {
      type: [Object, Function],
      default: () => {
        return {
          height: '32px',
        }
      }
    },
    mainMaxHeight: {
      type: Number,
      default: 300
    }
  },
  data () {
    return {
      tableData: [],
      pageSizes: [],
      layout: "",
      currentPage: 1,
      pageSize: 1,
      total: 0,
    }
  },
  watch: {
    data: {
      handler: function (val) {
        this.tableData = val;
      },
      deep: true,
      immediate: true,
    },
    pageOption: {
      handler: function (val) {
        this.pageSizes = val.pageSizes;
        this.layout = val.layout;
        this.currentPage = val.currentPage;
        this.pageSize = val.pageSize;
        this.total = val.total;
      },
      deep: true,
      immediate: true,
    },
  },

  computed: {
    mainStyle () {
      let style = { 'min-height': (this.mainMaxHeight + 76) + 'px' };
      if (this.height) {
        style.height = `calc(${typeof this.height === 'number' ? this.height + 'px' : this.height} - 76px)`;
      }
      return style;
    },
    tabelHeight () {
      let height = 0;
      if (this.height) {
        height = this.height;
        if (['auto', 'inherit', 'initial', '100%'].includes(height)) {
          height = this.mainMaxHeight;
        } else {
          if (typeof height === 'string') {
            height = parseInt(height.replace('px', ''));
          }
          height = height - 76;
        }
      } else {
        height = this.mainMaxHeight;
      }
      if (height < this.mainMaxHeight) {
        height = this.mainMaxHeight;
      }
      return height;
    }
  },
}
</script>

<style lang="scss" scoped>
.tableBox {
  padding-bottom: 76px;
  position: relative;
}
</style>